<template>
  <div class="quality-judge-container">
    <!-- 搜索区域 (Copied structure from LayOutJudge, adapted models/labels) -->
    <div class="search-panel">
      <div class="search-row">
        <div class="search-item">
          <span class="label">时间</span>
          <el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" class="custom-date-picker" />
        </div>
        <div class="search-item range-item">
          <span class="label">出口厚度</span>
          <el-input v-model="searchParams.prodThicknessMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.prodThicknessMax" placeholder="最大值" class="range-input" />
        </div>
        <div class="search-item range-item">
          <span class="label">出口宽度</span>
          <el-input v-model="searchParams.prodWidthMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.prodWidthMax" placeholder="最大值" class="range-input" />
        </div>
         <div class="search-item range-item">
          <span class="label">原料厚度</span>
          <el-input v-model="searchParams.materialThicknessMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.materialThicknessMax" placeholder="最大值" class="range-input" />
        </div>
        <div class="search-item">
          <span class="label">钢种</span>
          <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable class="custom-select" >
             <el-option label="SPHC-LT" value="SPHC-LT" />
             <el-option label="SPHE-H" value="SPHE-H" />
             <el-option label="SPCD" value="SPCD" />
             <el-option label="SPCC" value="SPCC" />
          </el-select>
        </div>
      </div>
      <div class="search-row">
         <div class="search-item">
          <span class="label">冷轧号</span>
          <el-input v-model="searchParams.coldRollNo" placeholder="请输入" class="custom-input" />
        </div>
        <div class="search-item">
          <span class="label">热轧号</span>
          <el-input v-model="searchParams.hotRollNo" placeholder="请输入" class="custom-input" />
        </div>
         <div class="search-item">
          <span class="label">异常筛选</span>
          <el-select v-model="searchParams.abnormalFilter" placeholder="请选择" clearable class="custom-select">
            <el-option label="是" value="yes" />
            <el-option label="否" value="no" />
          </el-select>
        </div>
         <div class="search-actions">
          <button class="btn query-btn" @click="handleSearch">查询</button>
          <button class="btn reset-btn" @click="handleReset">重置</button>
          <button class="btn export-btn">导出</button>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-panel">
      <el-table
        :data="pagedTableData"
        style="width: 100%;"
        height="100%"
        border
        highlight-current-row
        :row-class-name="tableRowClassName"
        @row-click="selectRow"
        :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '8px 10px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
        :cell-style="{ padding: '8px 10px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
        :row-style="{ background: '#0f2142' }"
      >
        <el-table-column type="index" label="序号" width="70" align="center" :index="indexMethod" fixed="left" />
        <el-table-column prop="coldRollNo" label="冷轧号" width="140" align="center" />
        <el-table-column prop="hotRollNo" label="热轧号" width="140" align="center" />
        <el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
        <el-table-column prop="prodSteelGrade" label="产品钢种" width="100" align="center" />
        <el-table-column prop="exportThickness" label="出口厚度[mm]" width="120" align="center" />
        <el-table-column prop="exportWidth" label="出口宽度[mm]" width="120" align="center" />
        <el-table-column prop="exportLength" label="出口长度[m]" width="110" align="center" />
        <el-table-column prop="overallResult" label="综合判定" width="90" align="center">
          <template #default="scope">
            <span :class="getOverallResultClass(scope.row.overallResult)">
              {{ scope.row.overallResult }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="overallScore" label="整体评分" width="100" align="center" />
        <el-table-column label="厚度超差长度[m]" align="center">
          <el-table-column prop="devHead" label="头部" width="80" align="center" />
          <el-table-column prop="devBody" label="本体" width="80" align="center" />
          <el-table-column prop="devTail" label="尾部" width="80" align="center" />
          <el-table-column prop="devOverall" label="整体" width="80" align="center" />
        </el-table-column>
        <el-table-column label="详情" width="100" fixed="right" align="center">
           <template #default>
             <button class="action-btn select-btn">选择</button>
           </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-panel">
       <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
    </div>

    <!-- 详情区域 -->
    <div v-if="selectedRow && detailData" class="detail-panel">
      <div class="detail-grid">
        <!-- 左侧判定 -->
        <div class="detail-left">
          <div class="judge-block" :class="getJudgeBlockClass(detailData.thickness.result)">
            <div class="judge-result">{{ detailData.thickness.result }}</div>
            <div class="judge-content">
              <span class="judge-label">判定内容</span>
              <span class="judge-value">{{ detailData.thickness.content }}</span>
            </div>
            <div class="judge-score">
              <span class="judge-label">评分结果</span>
              <span class="judge-value">{{ detailData.thickness.score }}</span>
            </div>
          </div>
          <div class="judge-block" :class="getJudgeBlockClass(detailData.shape.result)">
            <div class="judge-result">{{ detailData.shape.result }}</div>
            <div class="judge-content">
              <span class="judge-label">判定内容</span>
              <span class="judge-value">{{ detailData.shape.content }}</span>
            </div>
            <div class="judge-score">
              <span class="judge-label">评分结果</span>
              <span class="judge-value">{{ detailData.shape.score }}</span>
            </div>
          </div>
        </div>

        <!-- 中间判定 -->
        <div class="detail-middle">
          <div class="judge-block-small" :class="getJudgeBlockClass(detailData.headPos.result)">
            <div class="judge-result-small">{{ detailData.headPos.result }}</div>
            <div class="judge-details">
              <div class="detail-item">{{ detailData.headPos.category }}</div>
              <div class="detail-item">{{ detailData.headPos.position }}</div>
            </div>
          </div>
           <div class="judge-block-small" :class="getJudgeBlockClass(detailData.bodyPos.result)">
            <div class="judge-result-small">{{ detailData.bodyPos.result }}</div>
            <div class="judge-details">
              <div class="detail-item">{{ detailData.bodyPos.category }}</div>
              <div class="detail-item">{{ detailData.bodyPos.position }}</div>
            </div>
          </div>
           <div class="judge-block-small" :class="getJudgeBlockClass(detailData.tailPos.result)">
            <div class="judge-result-small">{{ detailData.tailPos.result }}</div>
            <div class="judge-details">
              <div class="detail-item">{{ detailData.tailPos.category }}</div>
              <div class="detail-item">{{ detailData.tailPos.position }}</div>
            </div>
          </div>
        </div>

        <!-- 右侧图表 -->
        <div class="detail-right detail-section"> 
          <div class="section-header">厚度(长度序列)</div>
          <div class="chart-container" ref="lineChartRef"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import {
  LineChart
} from 'echarts/charts';
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent, 
  MarkLineComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';

// Register ECharts components
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  DataZoomComponent,
  MarkLineComponent 
]);

// --- Interfaces --- 
interface SearchParams {
  dateRange: Date[];
  prodThicknessMin: string;
  prodThicknessMax: string;
  prodWidthMin: string;
  prodWidthMax: string;
  materialThicknessMin: string;
  materialThicknessMax: string;
  steelGrade: string;
  coldRollNo: string;
  hotRollNo: string;
  abnormalFilter: string;
}

interface TableRow {
  id: number;
  coldRollNo: string;
  hotRollNo: string;
  steelGrade: string;
  prodSteelGrade: string;
  exportThickness: number;
  exportWidth: number;
  exportLength: number;
  overallResult: 'OK' | 'NO';
  overallScore: number;
  devHead: number;
  devBody: number;
  devTail: number;
  devOverall: number;
}

interface JudgeDetail {
  result: 'OK' | 'NO';
  content?: string;
  score?: number;
  category?: string;
  position?: number | string;
}

interface DetailData {
  thickness: JudgeDetail;
  shape: JudgeDetail;
  headPos: JudgeDetail;
  bodyPos: JudgeDetail;
  tailPos: JudgeDetail;
}

// --- Reactive State --- 
const searchParams = reactive<SearchParams>({
  dateRange: [],
  prodThicknessMin: '',
  prodThicknessMax: '',
  prodWidthMin: '',
  prodWidthMax: '',
  materialThicknessMin: '',
  materialThicknessMax: '',
  steelGrade: '',
  coldRollNo: '',
  hotRollNo: '',
  abnormalFilter: ''
});

// --- Mock Table Data --- 
const allTableData = ref<TableRow[]>(Array.from({ length: 241 }, (_, i) => {
  const isOk = Math.random() > 0.3;
  return {
    id: i + 1,
    coldRollNo: `L1250173${String(500 + i).padStart(3, '0')}`,
    hotRollNo: `225125${String(7000 + i * 3 % 1000).padStart(4, '0')}`,
    steelGrade: i % 4 === 0 ? 'SPHE-H' : 'SPHC-LT',
    prodSteelGrade: i % 3 === 0 ? 'SPCD' : 'SPCC',
    exportThickness: parseFloat((0.34 + (i % 10 - 5) * 0.002).toFixed(3)),
    exportWidth: 1200 + (i % 5),
    exportLength: 5073 + Math.floor(Math.random() * 300),
    overallResult: isOk ? 'OK' : 'NO',
    overallScore: parseFloat((isOk ? (85 + Math.random() * 15) : (75 + Math.random() * 10)).toFixed(2)),
    devHead: Math.floor(Math.random() * (isOk ? 3 : 8)),
    devBody: 0,
    devTail: Math.floor(Math.random() * (isOk ? 2 : 4)),
    devOverall: Math.floor(Math.random() * (isOk ? 3 : 10)),
  };
}));

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: allTableData.value.length
});

const pagedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return allTableData.value.slice(start, end);
});

const indexMethod = (index: number) => {
  return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
};

const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
};

// --- Row Selection & Detail Data --- 
const selectedRow = ref<TableRow | null>(null);

const detailData = computed<DetailData | null>(() => {
  if (!selectedRow.value) return null;
  const seed = selectedRow.value.id;
  console.log('seed', seed);
  const thicknessOk = Math.random() > 0.1; // Higher chance for thickness OK
  const shapeOk = Math.random() > 0.4;
  return {
    thickness: {
      result: thicknessOk ? 'OK' : 'NO',
      content: '厚度',
      score: parseFloat((thicknessOk ? 95 + Math.random() * 5 : 80 + Math.random() * 10).toFixed(1))
    },
    shape: {
      result: shapeOk ? 'OK' : 'NO',
      content: '板形',
      score: parseFloat((shapeOk ? 80 + Math.random() * 15 : 50 + Math.random() * 15).toFixed(1))
    },
    headPos: {
      result: selectedRow.value.devHead < 3 ? 'OK' : 'NO',
      category: '头部超差位置',
      position: selectedRow.value.devHead > 0 ? selectedRow.value.devHead : '-'
    },
    bodyPos: {
      result: 'OK',
      category: '本体超差位置',
      position: '-'
    },
    tailPos: {
      result: selectedRow.value.devTail < 2 ? 'OK' : 'NO',
      category: '尾部超差位置',
      position: selectedRow.value.devTail > 0 ? selectedRow.value.devTail : '-'
    }
  };
});

const selectRow = (row: TableRow) => {
  selectedRow.value = row;
  console.log('选中行:', row);
};

const tableRowClassName = ({ row }: { row: TableRow }) => {
  if (selectedRow.value && row.id === selectedRow.value.id) {
    return 'selected-row'; 
  }
  return '';
};

// Helper for conditional styling
const getOverallResultClass = (result: 'OK' | 'NO') => {
  return result === 'OK' ? 'result-ok' : 'result-no';
};
const getJudgeBlockClass = (result: 'OK' | 'NO') => {
  return result === 'OK' ? 'judge-ok' : 'judge-no';
};

// --- ECharts --- 
const lineChartRef = ref<HTMLElement | null>(null);
let lineChartInstance: echarts.ECharts | null = null;

const generateChartData = (seed: number) => {
  const length = 50; // Number of data points
  const xData = Array.from({ length }, (_, i) => i * 100 + Math.floor(Math.random()*20)); // Simulate distance
  const baseThickness = 0.34 + (seed % 10 - 5) * 0.001;
  const thicknessData = Array.from({ length }, (_, i) => parseFloat((baseThickness + Math.sin(i / 5) * 0.005 + (Math.random() - 0.5) * 0.002).toFixed(3)));
  const speedData = Array.from({ length }, (_, i) => Math.max(200, Math.min(1300, 800 + Math.cos(i / 6) * 400 + (Math.random() - 0.5) * 100)));
  const upperLimit = baseThickness + 0.01;
  const lowerLimit = baseThickness - 0.01;
  return { xData, thicknessData, speedData, upperLimit, lowerLimit };
};

const lineChartOption = computed(() => {
  if (!selectedRow.value) return {};
  const { xData, thicknessData, speedData, upperLimit, lowerLimit } = generateChartData(selectedRow.value.id);
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['厚度', '速度', '厚度上限', '厚度下限'],
      textStyle: { color: '#c0c4cc' }
    },
    grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true }, // Added bottom margin for dataZoom
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: { color: '#c0c4cc' },
      name: '(m)', // X-axis name
      nameLocation: 'end',
      nameTextStyle: { color: '#c0c4cc', align: 'right', verticalAlign: 'top', padding: [10, 0, 0, 0] } // Adjust padding
    },
    yAxis: [
      {
        type: 'value',
        name: 'mm',
        position: 'left',
        axisLabel: { color: '#c0c4cc' },
        splitLine: { lineStyle: { color: '#3a5a8a' } },
        min: 0.24, // Example min/max based on image
        max: 0.36 
      },
      {
        type: 'value',
        name: 'm/min',
        position: 'right',
        axisLabel: { color: '#c0c4cc' },
        splitLine: { show: false }, // Hide grid lines for the second y-axis
        min: 0,
        max: 1400 
      }
    ],
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            start: 0,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            textStyle: { color: '#c0c4cc' },
            borderColor: '#3a5a8a'
        }
    ],
    series: [
      {
        name: '厚度',
        type: 'line',
        yAxisIndex: 0,
        data: thicknessData,
        smooth: true,
        showSymbol: false,
        itemStyle: { color: '#ff4d4f' }, // Red color for thickness
        markLine: {
          silent: true,
          symbol: ['none', 'none'],
          lineStyle: { type: 'dashed', color: '#ccc' },
          data: [
            { yAxis: upperLimit, label: { formatter: '厚度上限:{c}', position: 'insideEndTop' } },
            { yAxis: lowerLimit, label: { formatter: '厚度下限:{c}', position: 'insideEndBottom' } }
          ]
        }
      },
      {
        name: '速度',
        type: 'line',
        yAxisIndex: 1,
        data: speedData,
        smooth: true,
        showSymbol: false,
        itemStyle: { color: '#e6a23c' } // Yellow color for speed
      },
      // Add dummy series for limits to appear in legend if needed
      { name: '厚度上限', type: 'line', data: [], lineStyle: { type: 'dashed', color: '#ccc' } },
      { name: '厚度下限', type: 'line', data: [], lineStyle: { type: 'dashed', color: '#ccc' } }
    ]
  };
});

const initChart = () => {
  try {
    if (lineChartRef.value && !lineChartInstance) {
      lineChartInstance = echarts.init(lineChartRef.value);
      lineChartInstance.setOption(lineChartOption.value);
    }
  } catch (error) {
    console.error("ECharts initialization failed:", error);
  }
};

const updateChart = () => {
  if (!selectedRow.value || !lineChartInstance) return;
  try {
    lineChartInstance.setOption(lineChartOption.value);
  } catch (error) {
    console.error("ECharts update failed:", error);
  }
};

const resizeChart = () => {
  lineChartInstance?.resize();
};

watch(selectedRow, (newVal) => {
  if (newVal) {
    nextTick(() => {
      if (!lineChartInstance) {
        initChart();
      } else {
        updateChart();
      }
    });
  } 
});

onMounted(() => {
  if (selectedRow.value) {
    nextTick(initChart);
  }
  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
  lineChartInstance?.dispose();
});

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof SearchParams;
    if (typedKey === 'dateRange') {
      searchParams[typedKey] = [];
    } else {
      searchParams[typedKey] = '';
    }
  });
  selectedRow.value = null;
  console.log('重置参数');
};

</script>

<style scoped>
/* --- Mostly copied styles --- */
.quality-judge-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; /* Use 100% for layout within router-view */
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
  display: flex;
  flex-direction: column;
}

.quality-judge-container > *:not(:last-child):not(.detail-section) {
  margin-bottom: 15px;
}

/* --- Search Panel (Ensure styles match LayOutJudge) --- */
.search-panel {
  background-color: #1c2d5a;
  padding: 10px 15px;
  border-radius: 3px;
  flex-shrink: 0;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.search-row:last-child { margin-bottom: 0; }
.search-item {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Match LayOutJudge */
  margin-bottom: 10px; /* Match LayOutJudge */
}
.label { 
  color: #c0c4cc;
  margin-right: 8px;
  white-space: nowrap;
  min-width: 65px; /* Match LayOutJudge */
  text-align: right; 
}
:deep(.custom-date-picker.el-date-editor) {
  width: 260px !important; /* Match LayOutJudge */
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
/* ... other date picker deep styles ... */

.range-item .label { min-width: 65px; /* Match LayOutJudge */ }
.range-input { width: 80px; /* Match LayOutJudge */ }
:deep(.range-input .el-input__wrapper) {
  padding-left: 8px;
  padding-right: 8px;
}
.separator { margin: 0 5px; color: #c0c4cc; }

.custom-input,
.custom-select,
.range-input,
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) { 
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
:deep(.custom-select .el-select__placeholder), 
:deep(.custom-select .el-select__caret) { color: #c0c4cc; }

.custom-input { width: 150px; /* Match LayOutJudge */ }
.custom-select { width: 120px; /* Match LayOutJudge */ }

.search-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 20px; /* Match LayOutJudge */
}
.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 10px;
  color: #fff;
}
.query-btn {
  background-color: #2979ff;
}
.query-btn:hover {
  background-color: #5393ff;
}
.reset-btn {
  background-color: #3a5a8a;
}
.reset-btn:hover {
   background-color: #5a7aa4;
}
.export-btn {
  background-color: #2979ff; 
}
.export-btn:hover {
  background-color: #5393ff;
}

/* --- Table Panel (Styles should be consistent) --- */
.table-panel {
  background-color: #1c2d5a;
  padding: 5px;
  border-radius: 3px;
  overflow: hidden;
  flex-grow: 1;
  min-height: 0;
  display: flex;
}
/* ... Deep table styles ... */
:deep(.el-table__body tr.current-row > td.el-table__cell),
:deep(.el-table__body tr.selected-row > td.el-table__cell) { 
  background-color: #263451 !important;
  color: #fff !important;
}

/* Table Specific Styles */
.result-ok {
  color: #67c23a; /* Green */
  font-weight: bold;
  background-color: rgba(103, 194, 58, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}
.result-no {
  color: #ff4d4f; /* Red */
  font-weight: bold;
  background-color: rgba(255, 77, 79, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.action-btn {
  padding: 3px 8px;
  font-size: 12px;
  border: none;
  border-radius: 3px;
  margin: 0 2px;
  cursor: pointer;
  color: #fff;
}
.select-btn { background-color: #e6a23c; } /* Yellow */
.select-btn:hover { background-color: #ebb563; }

/* --- Pagination Panel (Styles should be consistent) --- */
/* ... More pagination styles ... */

/* --- Detail Panel (Styles should be consistent) --- */
.detail-panel {
  flex-shrink: 0;
  padding: 15px;
  background-color: #0f2142; /* Slightly different background for contrast */
  border-radius: 4px;
}

.detail-grid {
  display: grid;
  grid-template-columns: auto auto 1fr; /* Left, Middle, Right (chart takes rest) */
  gap: 20px;
  align-items: start; 
}

/* Left and Middle common */
.detail-left, .detail-middle {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Left Section */
.judge-block {
  background-color: #1c2d5a;
  border: 1px solid #3a5a8a;
  border-radius: 3px;
  padding: 10px 15px;
  display: grid;
  grid-template-areas:
    "result result"
    "label1 value1"
    "label2 value2";
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  align-items: center;
  min-width: 200px;
}
.judge-result {
  grid-area: result;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #3a5a8a;
}
.judge-label { grid-area: label1 / label1 / label2 / label2; color: #a0a3a8; font-size: 12px; }
.judge-value { grid-area: value1 / value1 / value2 / value2; font-weight: bold; }

.judge-content { display: contents; } 
.judge-score { display: contents; } 

.judge-content .judge-label { grid-area: label1; }
.judge-content .judge-value { grid-area: value1; }
.judge-score .judge-label { grid-area: label2; }
.judge-score .judge-value { grid-area: value2; }

.judge-ok .judge-result { color: #67c23a; }
.judge-no .judge-result { color: #ff4d4f; }

/* Middle Section */
.judge-block-small {
  background-color: #1c2d5a;
  border: 1px solid #3a5a8a;
  border-radius: 3px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 240px;
}
.judge-result-small {
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 3px;
}
.judge-ok .judge-result-small { color: #67c23a; background-color: rgba(103, 194, 58, 0.1); }
.judge-no .judge-result-small { color: #ff4d4f; background-color: rgba(255, 77, 79, 0.1); }

.judge-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-item {
  font-size: 12px;
}

/* Right Section (Chart) */
.detail-right {
  /* Inherit .detail-section styles */
  display: flex; /* Make it flex container */
  flex-direction: column; /* Stack header and chart vertically */
  height: 100%; /* Take full height of grid cell */
  background-color: #1c2d5a; /* Match other detail sections */
  border-radius: 3px;
  overflow: hidden;
}
.section-header { 
  background-color: #2979ff;
  color: #fff;
  padding: 8px 15px;
  font-weight: bold;
 }

.chart-container {
  flex-grow: 1; /* Allow chart container to fill space */
  min-height: 200px; /* Ensure minimum height */
  padding: 10px;
}

</style>